﻿<html>
	<head>
		<title>Butchiso | Digital Crayon</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
		 <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
		 <script src="js/main.js" type="text/javascript"></script>
	</head>
	<body>
	<table>
		<tr>
			<td>
			<div id="canvasDiv"></div>
			<script type="text/javascript"> 
				$(document).ready(function() {
					prepareCanvas();
					$( "#textEditor" ).dialog({autoOpen: false});
				});
			</script>
			</td>
			<td valign="top">
				<fieldset>
					<legend>File</legend>
					<ul class="color">
						<li><button id="btnNew" type="button">New</button></li>
						<li><button id="btnSave" type="button">Save</button></li>
					</ul>
				</fieldset>
				<fieldset>
					<legend>Color</legend>
					<ul class="color colorpalette">
						<li><div class="colorItem" title="#3b4e17" style="background-color: #3b4e17;">&nbsp;</div</li>
						<li><div class="colorItem" title="#659b41" style="background-color: #659b41;">&nbsp;</div</li>
						<li><div class="colorItem" title="#003F87" style="background-color: #003F87;">&nbsp;</div</li>
						<li><div class="colorItem" title="#ff6600" style="background-color: #ff6600;">&nbsp;</div</li>
						<li><div class="colorItem" title="#ff0000" style="background-color: #ff0000;">&nbsp;</div</li>
						<li><div class="colorItem" title="#cb3594" style="background-color: #cb3594;">&nbsp;</div</li>
						<li><div class="colorItem" title="#ffcf33" style="background-color: #ffcf33;">&nbsp;</div</li>
						<li><div class="colorItem" title="#986928" style="background-color: #986928;">&nbsp;</div</li>
					</ul>
				</fieldset>
				<fieldset>
					<legend>Crayon size</legend>
					<ul>
						<li><button class="brushSize" title="small" id="small" type="button"></button></li>
						<li><button class="brushSize" title="normal" id="normal" type="button"></button></li>
						<li><button class="brushSize" title="large" id="large" type="button"></button></li>
						<li><button class="brushSize" title="huge" id="huge" type="button"></button></li>
					</ul>
				</fieldset>
				<fieldset>
					<legend>Tools</legend>
					<ul>
						<li><button class="tool" id="btnEraser" type="button"></button></li>
						<li><button class="tool" id="btnCrayon" type="button"></button></li>
						<li><button class="tool" id="btnText" type="button"></button></li>
						<li><button class="tool" id="btnDrag" type="button"></button></li>
					</ul>
				</fieldset>
				<fieldset>
					<legend>Insert image</legend>
					<div class="insert_image_scroll">
						<ul>
							<li><input type="image" src="images/resources/banobita1.jpg" class="images" value="resources/banobita1.jpg" /></li>
							<li><input type="image" src="images/resources/banobita2.jpg" class="images" value="resources/banobita2.jpg" /></li>
							<li><input type="image" src="images/resources/nobita1.jpg" class="images" value="resources/nobita1.jpg" /></li>
							<li><input type="image" src="images/resources/nobita2.jpg" class="images" value="resources/nobita2.jpg" /></li>
							<li><input type="image" src="images/resources/nobita3.jpg" class="images" value="resources/nobita3.jpg" /></li>
							<li><input type="image" src="images/resources/nobita4.jpg" class="images" value="resources/nobita4.jpg" /></li>
							<li><input type="image" src="images/resources/chaien1.jpg" class="images" value="resources/chaien1.jpg" /></li>
							<li><input type="image" src="images/resources/chaien2.jpg" class="images" value="resources/chaien2.jpg" /></li>
						<ul>
					</div>
				</fieldset>
			</td>
		</tr>
	</table>
	<div id="log"></div>
	<div id="log1"></div>
	<div id="textEditor" style="dislay:none" title="Input text">
		<textarea id="txtText" rows="3" cols="25"></textarea>
		<button id="btnTextOK">OK</button>
	</div>
	</body>
</html>